<template>
    <div>
      <el-row>
        <el-col :span="12"
          ><div class="grid-content">
            <v-chart :options="option1" :watchShallow="true" :auto-resize="true" :style="{ width: '100%', height: '100%' }" /></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content"><v-chart :options="option2" :watchShallow="true" :auto-resize="true" :style="{ width: '100%', height: '100%' }" /></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="table-sty">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="month" label="月份"> </el-table-column>
              <el-table-column prop="bg" label="办公室大楼用水"> </el-table-column>
              <el-table-column prop="dx" label="地下室冲洗用水"> </el-table-column>
              <el-table-column prop="zs" label="总生活给水管"> </el-table-column>
              <el-table-column prop="zx" label="总消防用水"> </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  <script>
  export default {
    name: 'stafftransfer',
    data() {
      return {
        option1: {
          title: {
            text: '水费支出',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: ['12月', '11月', '10月', '9月', '8月', '7月']
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            data: ['办公室大楼用水', '地下室冲洗用水', '总生活给水管', '总消防用水'],
            bottom: 0
          },
          series: [
            {
              name: '办公室大楼用水',
              data: [103242, 110293, 92341, 109234, 110265, 96234],
              type: 'bar'
            },
            {
              name: '地下室冲洗用水',
              data: [34596, 30923, 27874, 29341, 23141, 28323],
              type: 'bar'
            },
            {
              name: '总生活给水管',
              data: [26983, 23467, 24893, 26782, 24132, 43435],
              type: 'bar'
            },
            {
              name: '总消防用水',
              data: [54, 58, 52, 54, 50, 52],
              type: 'bar'
            }
          ]
        },
        option2: {
            title: {
            text: '水费支出',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: ['12月', '11月', '10月', '9月', '8月', '7月']
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            data: ['办公室大楼用水', '地下室冲洗用水', '总生活给水管', '总消防用水'],
            bottom: 0
          },
          series: [
            {
              name: '办公室大楼用水',
              data: [103242, 110293, 92341, 109234, 110265, 96234],
              type: 'line'
            },
            {
              name: '地下室冲洗用水',
              data: [34596, 30923, 27874, 29341, 23141, 28323],
              type: 'line'
            },
            {
              name: '总生活给水管',
              data: [26983, 23467, 24893, 26782, 24132, 43435],
              type: 'line'
            },
            {
              name: '总消防用水',
              data: [54, 58, 52, 54, 50, 52],
              type: 'line'
            }
          ]
        },
        tableData: [
          {
            month: '12月',
            bg: 103242,
            dx: 34596,
            zs: 26983,
            zx: 54,
          },
          {
            month: '11月',
            bg: 110293,
            dx: 30923,
            zs: 23467,
            zx: 58,
          },
          {
            month: '10月',
            bg: 92341,
            dx: 27874,
            zs: 24893,
            zx: 52,
          },
          {
            month: '9月',
            bg: 109234,
            dx: 29341,
            zs: 26782,
            zx: 54,
          },
          {
            month: '8月',
            bg: 110265,
            dx: 23141,
            zs: 24132,
            zx: 50,
          },
          {
            month: '7月',
            bg: 96234,
            dx: 28323,
            zs: 43435,
            zx: 52,
          },
        ]
      };
    }
  };
  </script>
  <style lang="scss" scoped>
  .grid-content {
    height: 50vh;
    margin-top: 20px;
  }
  .table-sty {
    margin: 20px;
  }
  </style>
  